<template>
  <div class="water-detail">
    <div class="class-tree">
      <edit-tree
        ref="trees"
        :treeSetting="treeSetting"
        :hideBtn="hideBtn"
        :haveRemark="false"
        :draggable="false"
        :haveRelated="haveRelated"
        @handleClickTree="handleClickTree"
        @dropNode="dropNode"
        :filterNode="filterNode"
      />
    </div>
    <div class="detail-content">
      <div class="top">
        <div>
          <div class="name">
            <span>{{ pageName }}</span>
          </div>
        </div>
        <div class="button">
          <el-button
            class="el-button--plain"
            size="mini"
            icon="el-icon-refresh"
            @click="refreshData"
            v-if="!isYinChuan"
            >同步</el-button
          >
        </div>
      </div>
      <div class="first" v-if="treeLevel == 1">
        <dividerTitle :title="'节点信息'"></dividerTitle>
        <div class="edit-form">
          <editForm
            :formConfig="formConfig"
            ref="editForm"
            :formData="editFormData"
          ></editForm>
        </div>
      </div>
      <div class="middle">
        <dividerTitle :title="'下级节点'" v-if="treeLevel == 1"></dividerTitle>
        <div class="content">
          <base-table
            ref="nextNodeTable"
            :tableSetting="baseTableSetting"
            @saveData="saveData"
          ></base-table>
        </div>
      </div>
    </div>
    <dialogPublic
      title="信息选择"
      :show.sync="showMember"
      @doSubmit="addSeleteMember"
      @doClose="() => (showMember = false)"
      width="60%"
      appendTobody
    >
      <orgMemberSelect
        ref="orgMemberSelect"
        v-if="showMember"
        :seleteSetting="orgMemberSelect"
      ></orgMemberSelect>
    </dialogPublic>
  </div>
</template>
<script>
import {
  getTreeRootData,
  getYCTreeRootData,
  syncNodeData,
  dataSourceData,
  saveData,
  saveYCData,
  getByCode,
} from "@/api/businessConfigurationManagement/paramMonitoringConfig.js";
export default {
  props: {
    //判断当前组织的数据
    currentData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    //当前是水厂还是水司
    currentOrg: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {},
  data() {
    return {
      showMember: false,
      orgMemberSelect: {
        seleteType: "device",
        radio: true,
        props: {
          label: "name",
          children: "children",
        },
        column: [
          {
            label: "设备名称",
            prop: "name",
          },
        ],
        chosedData: [],
      },
      treeLevel: 1,
      pageName: "",
      treeSetting: {
        btnArr: [],
        title: "监测对象",
        data: [],
        defaultProps: {
          children: "children",
          label: "name",
        },
      },
      hideBtn: true,
      treeNode: null,
      treeNodeId: "",
      haveRelated: true,
      //节点信息-水司级页面
      formConfig: {
        labelWidth: "100px",
        itemArr: [
          {
            label: "节点编码",
            prop: "code",
            type: "select",
            span: 8,
            selectOption: [],
            required: true,
            methods: (obj, editFormData) => {
              editFormData.name = obj.name;
            },
          },
          {
            label: "节点名称",
            prop: "name",
            type: "text",
            span: 8,
            maxlength: 20,
            required: true,
            methods: (val) => {},
          },
          {
            label: "节点层级",
            prop: "level",
            type: "select",
            span: 8,
            isHide: false,
            required: true,
            disabled: true,
            selectOption: this.$store.getters["dirtData"](
              "water_monitor_level"
            ),
          },
          {
            label: "数据源",
            prop: "dataSource",
            type: "select",
            span: 8,
            isHide: false,
            required: true,
            disabled: true,
            selectOption: [],
          },
        ],
      },
      currentRelatedRow: null,
      editFormData: this.treeNode,
      //下级节点table配置
      baseTableSetting: {
        indexShow: false,
        column: [
          {
            label: "对象编码",
            textAlign: "left",
            prop: "code",
          },
          {
            label: "对象名称",
            textAlign: "left",
            prop: "name",
          },
          {
            label: "所在层级",
            textAlign: "left",
            prop: "level",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "water_monitor_level",
                row.level
              );
            },
          },
          {
            label: "排序",
            textAlign: "left",
            prop: "sort",
          },
        ],
        data: [],
        noBorderRight: true,
        autoHeight: true,
        rowIndex: 0,
      },
      relateAccount: [
        {
          label: "关联台账",
          prop: "equipmentName",
          textAlign: "left",
          type: "textButton",
          method: (row, index) => {
            this.openAccountDialog(row);
          },
        },
      ],
      bindStatus: [
        {
          label: "绑定状态",
          prop: "status",
          textAlign: "left",
          type: "switch",
          activeText: "已绑定",
          inactiveText: "未绑定",
        },
      ],
    };
  },
  computed: {
    //是否展示JSA
    isYinChuan() {
      return this.$store.getters.currentAppInfo.appCode == "EAM_YCSC";
    },
  },
  mounted() {
    this.getTreeData();
    this.getDataSourceSelect();
  },
  created() {},
  watch: {
    treeNode: {
      handler(val) {
        this.editFormData = val;
        this.editFormData.dataSource = this.currentData
          ? this.currentData.datasource
          : "";
        if (val.level == 1) {
          this.getTableData(val);
        }
      },
    },
  },
  methods: {
    //保存表格修改后的数据
    saveTableData(params) {
      let actionApi = this.isYinChuan ? saveYCData : saveData;
      if (this.isYinChuan) {
        params.equipmentId = params.equipment;
      }
      actionApi(params).then(
        (res) => {
          if (res.code === 200) {
            this.$message.success(res.description);
            this.getTreeData();
            //this.handleClickTree(this.treeNode)
          }
        },
        (err) => {
          this.$message.error(err);
        }
      );
    },
    //台账弹窗中的确定按钮
    addSeleteMember() {
      let data = this.$refs.orgMemberSelect.getSeleteData();
      if (data.length > 0) {
        this.currentRelatedRow.equipment = data[0].id;
        this.currentRelatedRow.equipmentName = data[0].name;
      } else {
        this.currentRelatedRow.equipment = null;
        this.currentRelatedRow.equipmentName = "关联";
      }
      this.saveTableData(this.currentRelatedRow);
      this.showMember = false;
    },
    //点击关联打开台账选择dialog
    openAccountDialog(row) {
      this.currentRelatedRow = row;
      this.showMember = true;
    },
    //switch按钮切换触发事件
    saveData(row) {
      this.saveTableData(row);
    },
    //数据源下拉框接口
    getDataSourceSelect() {
      if (this.isYinChuan) {
        let option = [
          {
            label: "测试水厂",
            value: "water_ycsc",
          },
        ];
        this.$set(this.formConfig.itemArr[3], "selectOption", option);
      } else {
        dataSourceData().then(
          (res) => {
            if (res.code == 200) {
              let datas = res.data;
              datas.map((item) => {
                (item.label = item.value), (item.value = item.key);
              });
              this.$set(this.formConfig.itemArr[3], "selectOption", datas);
            }
          },
          (err) => {
            this.$message.error(err);
          }
        );
      }
    },
    //同步数据
    refreshData() {
      let param = {
        appId: this.currentOrg.appCode,
        //appId:'nsss',
        //mark:'yhsw'
        //appId:this.$store.getters.appListData[0].appCode,
        mark: this.currentData.datasource,
      };
      syncNodeData(param).then(
        (res) => {
          if (res.code == 200) {
            this.getTreeData();
            this.handleClickTree(this.treeNode);
            this.$message.success(res.description);
          }
        },
        (err) => {
          this.$message.error(err);
        }
      );
    },
    //表格数据
    async getTableData(val) {
      if (val && val.children) {
        let listCode = val.children.map((i) => i.code).join(",");
        if (val.level == "4") {
          let res = await getByCode({ list: listCode });
          let equipment = res.data;
          let arr = val.children;
          let objArr = [];
          arr.map((item, index) => {
            let obj = {};
            obj.appId = this.currentOrg.appCode;
            obj.id = item.id;
            obj.equipment = equipment[index].equipmentId;
            obj.parentId = item.parentId;
            (obj.name = item.name),
              (obj.level = item.level),
              (obj.code = item.code),
              (obj.sort = item.sort);
            obj.status = item.status;
            obj.equipmentName = equipment[index].equipmentId
              ? equipment[index].equipmentName
              : "关联";
            objArr.push(obj);
          });
          this.$set(this.baseTableSetting, "data", objArr);
        } else {
          let arr = val.children;
          let objArr = [];
          arr.map((item) => {
            let obj = {};
            obj.appId = this.currentOrg.appCode;
            obj.id = item.id;
            obj.equipment = item.id;
            obj.parentId = item.parentId;
            (obj.name = item.name),
              (obj.level = item.level),
              (obj.code = item.code),
              (obj.sort = item.sort);
            obj.status = item.status;
            obj.equipmentName =
              item.equipment && item.equipmentName
                ? item.equipmentName
                : "关联";
            objArr.push(obj);
          });
          this.$set(this.baseTableSetting, "data", objArr);
        }
      } else {
        this.$set(this.baseTableSetting, "data", []);
      }
    },
    //获取树组织数据
    async getTreeData() {
      let param = !this.isYinChuan
        ? {
            appId: this.currentOrg.appCode,
            //appId:'nsss'
          }
        : {};
      let actionApi = this.isYinChuan ? getYCTreeRootData : getTreeRootData;
      await actionApi(param).then(
        (res) => {
          if (res.code == 200 && res.data.length > 0) {
            if (this.treeNodeId == "") {
              this.treeNodeId = res.data[0].id;
              this.treeNode = res.data[0];
            }
            this.allTreeData = res.data;
            this.orginData = JSON.parse(JSON.stringify(res.data));
            this.$set(this.treeSetting, "data", res.data);
            this.$refs.trees.setCurrentKey(this.treeNodeId);
          }
        },
        (err) => {
          this.$message.error(err);
        }
      );
    },
    //筛选树
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //点击树节点
    handleClickTree(node) {
      this.treeLevel = node.level;
      this.treeNodeId = node.id;
      this.treeNode = node;
      this.treeNode.dataSource = this.currentData
        ? this.currentData.datasource
        : "";
      if (node.level == "4") {
        this.baseTableSetting.column = this.baseTableSetting.column.slice(0, 4);
        this.baseTableSetting.column = [
          ...this.baseTableSetting.column,
          ...this.relateAccount,
        ];
      } else if (node.level == "5") {
        this.baseTableSetting.column = this.baseTableSetting.column.slice(0, 4);
        this.baseTableSetting.column = [
          ...this.baseTableSetting.column,
          ...this.bindStatus,
        ];
      } else {
        this.baseTableSetting.column = this.baseTableSetting.column.slice(0, 4);
      }
      this.$nextTick(() => {
        this.getTableData(node);
      });
    },
    dropNode(data) {},
  },
};
</script>

<style lang="less" scoped>
.water-detail {
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  border-radius: @kr-bg-board-radius;
  .class-tree {
    height: 100%;
    min-width: 300px;
    //overflow: scroll;
  }
  .detail-content {
    height: 100%;
    width: calc(100% - 300px);
    border-left: 15px solid #f2f3f8;
    flex: 1;
    padding: 20px;
    //overflow: auto;
    .top {
      height: 50px;
      display: flex;
      justify-content: space-between;
      .name {
        font-size: 16px;
        font-weight: bold;
        padding: 0 10px;
        letter-spacing: 4px;
        height: 40px;
        line-height: 40px;
        text-align: left;
        padding: 0 10px;
      }
      .button {
        height: 40px;
        line-height: 40px;
      }
    }
    .first {
      height: 150px;
      .edit-form {
        margin: 10px 0;
      }
    }
    .middle {
      flex: 3;
      height: calc(100% - 40px);
      overflow: auto;
      .content {
        margin: 20px 0;
        text-align: left;
        font-size: 14px;
        .select {
          margin: 10px 0 20px 26px;
          .item-label::before {
            content: "*";
            color: red;
            margin-right: 4px;
          }
          .input {
            width: calc(100% - 102px);
            margin-left: 20px;
          }
        }
        .param {
          margin: 10px 10px;
          display: flex;
          .desc {
            text-align: right;
            width: 100px;
            height: 40px;
            line-height: 40px;
          }
          .item {
            margin: 5px 10px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            padding: 0 10px;
            background-color: #f2f2f2;
            border-radius: 10px;
          }
          .base-item {
            background-color: #d9f2fd;
          }
          .list {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
          }
        }
      }
    }
    .buttom {
      flex: 4;
      .add {
        text-align: right;
        margin: 10px 0;
      }
    }
  }
}
/* 设置switch按钮中文字完全显示再按钮中 */
/deep/.switch.el-switch .el-switch__core,
/deep/.el-switch .el-switch__label {
  width: 65px !important;
}
</style>
